<template>
	<view class="content">
		<view class="drop" v-show="clickShow">
			<view class="shape"></view>
			<view class="dropItem">
				<image src="../../static/tabimg/mima.png" class="imgCode"></image>
				<view @tap="changepass">修改密码</view>
			</view>
			<view class="dropItem">
				<image src="../../static/tabimg/tuichu.png" class="imgCode2"></image>
				<view @tap="close">退出应用</view>
			</view>
		</view>
		<!-- 主体 -->
		<view class="uni-tab-bar">
			<!-- 主体导航 -->
			<scroll-view class="uni-swiper-tab" @scroll="scroll" :scroll-left="scrollLeft">
			<view v-for="(item,index) in tabBars" :key="item.id" class="swiper-tab-list" :class="tabIndex==index ? 'active' : ''"
			 @click="tapTab" :data-current="index">{{item.name}}</view>
			</scroll-view>
			<swiper class="swiper" :current="tabIndex" :duration="300" @change="changeTab"  indicator-color="#C1C2C6" indicator-active-color="#134199">
				<swiper-item class="Roughing">
					<swiper :indicator-dots="true" class="chanpin" indicator-color="#C1C2C6" indicator-active-color="#134199">
						<swiper-item class="Roughingbox">
							<view class="introduction-title">产品工艺介绍/产品大纲</view>
							<view class="scroll-Y introduction-main">
								<view>
									<view class="projectmain"><rich-text :nodes="proLinIntroduction"></rich-text></view>
								</view>
							</view>
						</swiper-item>
						<swiper-item class="Roughingbox" v-if="false">
							<view class="introduction-title">产品大纲</view>
							<view class="scroll-Y introduction-main">
								<view>
									<view class="projectmain"><rich-text :nodes="proLinOutline"></rich-text></view>
								</view>
							</view>
						</swiper-item>
						<swiper-item class="Roughingbox">
							<view class="introduction-title">主要设备特点</view>
							<view class="scroll-Y introduction-main">
								<view>
									<view class="projectmain"><rich-text :nodes="proLinFeature"></rich-text></view>
								</view>
							</view>
						</swiper-item>
						<swiper-item class="Roughingbox">
							<view class="introduction-title">标志事件</view>
							<view class="scroll-Y introduction-main">
								<view>
									<view class="projectmain"><rich-text :nodes="proLinMarkEvent"></rich-text></view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</swiper-item>
				<swiper-item class="Roughing">
					<swiper :indicator-dots="true" class="chanpin" indicator-color="#C1C2C6" indicator-active-color="#134199">
						<swiper-item class="Roughingbox">
							<view class="introduction-title">单位业务范围:</view>
							<view class="scroll-Y introduction-main">
								<view>
									<view class="projectmain"><rich-text :nodes="proBusinessArea"></rich-text></view>
								</view>
							</view>
						</swiper-item> 
						<swiper-item class="Roughingbox">
							<view class="introduction-title">自动化系统配置</view>
							<view class="scroll-Y introduction-main">
								<view>
									<view class="projectmain"><rich-text :nodes="proSystemConfiguration"></rich-text></view>
								</view>
							</view>
						</swiper-item>
						<swiper-item class="Roughingbox">
							<view class="introduction-title">功能简介</view>
							<view class="scroll-Y introduction-main">
								<view>
									<view class="projectmain"><rich-text :nodes="proFunctionSummary"></rich-text></view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</swiper-item>
				<swiper-item class="Roughing">
					<view class="Roughingbox">
						<view class="introduction-title">宣传报道</view>
						<view class="scroll-Y reportbox">
							<view class="newlistItem" v-for="(item,index) in proReport" :key="index" @tap="newDetails(item.id)">
								<view class="newReport">
									<view class="newinfo">
										<view class="newInfoimg" v-html="item.label"></view>
										<view class="newtitle">{{item.title}}</view>
									</view>
									<view class="newTime">{{item.createTime}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="Roughing">
					<view class="Roughingbox">
						<view class="introduction-title">主要成果</view>
						<view class="scroll-Y introduction-main">
							<view>
								<view class="projectmain"><rich-text :nodes="proOutcome"></rich-text></view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical" :direction="direction" @trigger="trigger" />
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue'
	import {post} from "../../lib/Util.js";
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	import {mapState,mapMutations} from 'vuex';
	var _self;
	var canvaArea = null;
	
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniIcon,
			uniFab
		},
		data() {
			return {
				pid:'',  //项目id
				//悬浮按钮
				horizontal: 'left',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF'
				},
				content: [{
						iconPath: '/static/tabimg/proplan2.png',
						selectedIconPath: '/static/tabimg/proplan.png',
						text: '生产信息',
						active: false
					},
					{
						iconPath: 'static/tabimg/model3.png',
						selectedIconPath: '/static/tabimg/model.png',
						text: '模型管理',
						active: false
					},
					{
						iconPath: '/static/tabimg/report.png',
						selectedIconPath: '/static/tabimg/report2.png',
						text: '报表分析',
						active: false
					},
					{
						iconPath: '/static/tabimg/prodinfo2.png',
						selectedIconPath: '/static/tabimg/prodinfo.png',
						text: '生产计划',
						active: false
					}
				],
				vertical: 'bottom',
				direction: 'horizontal',
				clickShow:false,
				//区域图
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				//二级导航的data
				scrollLeft: 0,
				tabIndex: 0,
				isClickChange: false,
				tabBars: [{
					name: '产线介绍',
					id: 'chanxian'
				}, {
					name: '系统介绍',
					id: 'xitong'
				}, {
					name: '宣传报道',
					id: 'xuanchuan'
				}, {
					name: '主要成果',
					id: 'zhuyao'
				}],
				proOutcome:'',     //主要成果
				proReport:[],      //宣传报道
				proSystemConfiguration:'',   //系统配置
				proBusinessArea:'',   //单位业务范围
				proFunctionSummary:'',  //功能简介
				proLinIntroduction:'',   //产线工艺介绍
				proLinOutline:'',    //产品大纲
				proLinFeature:'',   //设备特点
				proLinTestTime:'',   //热式时间
				proLinMarkEvent:'',   //标志事件
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),

		methods: {
			//悬浮按钮
			trigger(e) {
				this.content[e.index].active = !e.item.active
				if(this.content[e.index].active){
					if(e.item.text === '生产信息'){
						uni.switchTab({
							url:"../prodinfo/prodinfo"
						})
					}
					if(e.item.text === '模型管理'){
						uni.switchTab({
							url:"../model/model"
						})
					}
					if(e.item.text === '报表分析'){
						uni.switchTab({
							url:"../report/report"
						})
					}
					if(e.item.text === '生产计划'){
						uni.switchTab({
							url:"../prodplan/prodplan"
						})
					}
				}
			},
			//导航栏关闭应用事件
			...mapMutations(['logout']),
			close(){
				let _self = this;
				uni.showModal({
					title: '退出登录',
					content: '确定要退出吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_self.logout();
							// #ifdef APP-PLUS  
							plus.runtime.quit();
							// #endif 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changepass(){
				uni.navigateTo({
					url:'/pages/changepass/changepass'
				})
			},
			//二级菜单的事件
			tapTab(e) {
				let tabIndex = e.target.dataset.current
				if (this.tabIndex === tabIndex) { //判断重复点击
					return false;
				} else {
					this.tabIndex = tabIndex;
					this.isClickChange = true;
				}
			},
			async changeTab(e) {
				let index = e.target.current;
				let _self = this
				if(e.target.current === 0){
					uni.showLoading({
						success() {
							_self.profunc("pro/findProductionLineIntro")
						}
					})
				}else if(e.target.current === 1){
					uni.showLoading({
						success() {
							_self.prosysconfig("pro/findSystemIntroduction")
						}
					})
				}else if(e.target.current === 2){
					uni.showLoading({
						success() {
							_self.prorep("pro/findProReport")
						}
					})
				}else if(e.target.current === 3){
					uni.showLoading({
						success() {
							_self.proout("pro/findProOutcome")
						}
					})
				}
				if (this.isClickChange) {
					this.tabIndex = index;
					this.isClickChange = false;
					return;
				}
				this.isClickChange = false;
				this.tabIndex = index; //一旦访问data就会出问题
			},
			
			//下拉菜单的选择
			change() {
				console.log(111)
			},
			//获取数据
			async profunc(sql){
				let res = await post(sql,{id:this.pid});
				let result = res.data
				uni.hideLoading()
				if(typeof(result) !== String){
					this.proLinIntroduction = result.proLinIntroduction;   //产线工艺介绍
					this.proLinFeature = result.proLinFeature;  //设备特点
					this.proLinMarkEvent = result.proLinMarkEvent;  //标志事件
				}else{
					uni.showToast({
						title: '暂无数据',
						icon: 'none'
					})
				}
			},
			async prosysconfig(sql){
				let res = await post(sql,{id:this.pid});
				let result = res.data
				uni.hideLoading()
				if(typeof(result) !== String){
					this.proBusinessArea = result.proBusinessArea;      //单位业务范围
					this.proSystemConfiguration = result.proSystemConfiguration;   // 系统配置
					this.proFunctionSummary = result.proFunctionSummary; //功能简介
				}
			},
			async prorep(sql){
				this.proReport = [];
				let data = {
					page: 1,
					size: 10,
					id : this.pid
				}
				let res = await post(sql,data);
				uni.hideLoading()
				let result = res.data.list
				if(typeof(result) !== String){
					// this.proReport = this.proReport.concat(result)
					for(let i = 0;i<result.length;i++){
						this.proReport.push(result[i])
					}
				}
			},
			async proout(sql){
				let res = await post(sql,{id:this.pid});
				let result = res.data;
				uni.hideLoading()
				if(typeof(result) !== String){
					this.proOutcome= result.proOutcome;      //主要成果
				}
			},
			newDetails(val){
				let pid = uni.getStorageSync('proid')
				uni.navigateTo({
					url:'../newdetails/newdetails?id='+pid+'&reportId='+val
				})
			}
		},

		onLoad(data) {
			this.pid = data.id
			let _self = this
			uni.setNavigationBarTitle({
			    title: data.title
			});
			uni.setStorageSync('proid',this.pid)
			uni.showLoading({
				success() {
					_self.profunc("pro/findProductionLineIntro")
				}
			})
			if (!uni.getStorageSync('hasLogin')) {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}
		},

		watch: {
			hasLogin() {
				if (!this.$store.state.hasLogin) {
					uni.reLaunch({
						url: '../login/login',
					});
				}
			}
		},
		onNavigationBarButtonTap(e) {
			if(e.float=="right"){
				this.clickShow = !this.clickShow;
			}
		}
	}
</script>


<style>
	/* 下面主体的高度 */
	.main {
		height: calc(1334rpx - 380rpx);
		padding: 26rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	/* 二级列表样式 */
	.prodtab {
		width: 248rpx;
		height: 94rpx;
	}
	
	.chanpin{
		height: 100%;
	}
	.introduction-title{
		height: 97rpx;
		line-height: 97rpx;
		text-align: center;
		font-size: 30rpx;
		color: #000000;
		border-bottom: 2rpx solid #C1C2C6;
	}
	.introduction-main{
		height: calc(100% - 100rpx - 67rpx);
	}
	.reportbox{
		height: calc(100% - 100rpx);
	}
	.projecttitle{
		background: #D9D9D9;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 24rpx;
		padding:0 30rpx;
		box-sizing: border-box;
	}
	.projectmain{
		padding:30rpx;
		box-sizing: border-box;
		font-size: 24upx;
	}
	.newlistItem{
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}
	.newReport{
		width: 100%;
		border-bottom: 1rpx solid #F7F6FC;
		font-size: 24rpx;
		height: 220rpx;
	}
	.newinfo{
		height: 150rpx;
	}
	.newInfoimg{
		width: 240rpx;
		height: 150rpx;
		margin-right: 20rpx;
		float: left;
	}
	.newimage{
		width: 240rpx;
		height: 150rpx;
	}
	.newtitle{
		overflow: hidden;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		word-break: break-all;
		display: -webkit-box;
		font-size: 30rpx;
		color: #555555;
		float: right;
		width: 400rpx;
	}
	.newTime{
		margin-top: 26rpx;
		height: 24rpx;
		line-height: 24rpx;
		font-size: 24rpx;
		color: #999999;
	}
</style>


